<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>欢迎名片百度地图</title>
    <style type="text/css">
        body, html,#allmap{
            width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}

        #result {width:100%;font-size:12px;}

        ul,li{list-style: none;margin:0;padding:0;float:left;}
        .tabars{
            display:flex;
            width:335px;
            /*height:800px;*/
            position:fixed;
            top:60px;
            left:20px;
            z-index: 99;
        }
        .tabarsRight{
            width:335px;
            flex:1;
            background-color: #fff;
            border-radius:24px;
        }
        .stationline{
            border-left:5px solid #007AFF;
            padding-left:4px;
            font-size:16px;
            display: inline-block;
        }
        .borders{
            border-bottom:1px solid #F1F1F1;
            box-sizing: border-box;
        }
        .jistation{
            padding:28px 28px 12px 28px;
        }
        .xianstation{
            padding:12px 28px 12px 28px;
        }
        .jistation .layui-form-switch{
            float:right ;
            margin-top:0;
            height:21px;
            width:38px;
        }
        .jistation .layui-form-onswitch{
            background: #007AFF;
            border-color:#007AFF;
        }
        .caller-seach{
            margin-top:20px;
            background: #F1F1F1;
            border-radius: 15px;
            padding-left:12px;
        }
        .caller-icon{
            font-size: 14px !important;
            margin-right: 2px;
            vertical-align: -2px;
        }
        .xianstation .input-text{
            display: inline-block;
            padding-left:0;
            width:74%;
            background:transparent;
            font-size:12px;
            height:30px;
            line-height: 30px;
            color:#8F8F8F;
            border-width: 0;
        }
        .search-btn{
            float: right;
            margin: 7px 12px 0 0;
            font-size: 12px;
            color: #1681FB;
            cursor:pointer;
        }
        .tabar{
            width:88px;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top:20px;
            text-align: center;
        }
        .tabar img{
            width:40px;
            height:40px;
        }
        .tabara{
            width:88px;
            margin-top:15px;
        }
        .tabarb{
            font-size: 13px;
            font-weight: 400;
            color: #454545;
            line-height: 18px;
            margin-top:10px;
        }
        .bottom-add{
            border-top:1px solid #EDEDED;
            box-sizing: border-box;
            position:fixed;
            bottom:0;
            width:312px;
            text-align: right;
            padding:10px 0 12px 0;
            background:#FFFFFF;
        }
        .btns{
            width: 90px;
            height: 36px;
            line-height:36px;
            border:none;
            border-radius: 22px;
            color:#FFFFFF;
            font-size:14px;
            cursor: pointer;
        }
        .blue{
            background: #007AFF;
        }
        .green{
            background: green;
            margin-left: 8px;
        }
        .orange{
            background: #E7A53A;
            margin-left:8px;
        }
        .addicon{
            font-size:14px;
            color:#FFFFFF;
        }
        .layui-form-checked[lay-skin=primary] i{
            background:#007AFF !important;
            border-color:#007AFF !important;
        }
        .laytrees{
            margin-top:12px;
        }


        /*设置表单的样式*/
        .formedit{
            padding:0 20px 0 18px;
        }
        .formlabel{
            float: left;
            padding-top:2px;
            color:#656565
        }
        .formedit .layui-form-radio>i:hover,
        .formedit .layui-form-radioed>i {
            color: #007AFF;
            font-size:16px;
            margin-right:4px;
        }
        .formedit .layui-form-select{
            margin-right: 25px;
        }

        .layui-form-select dl{
            max-height:170px!important;
        }
        .formedit .layui-form-select dl dd.layui-this{
            background: #007AFF;
        }
        .formedit .layui-form-select .layui-input{
            padding:8px;
        }
        .formedit .layui-form-select dl{
            top:28px;
            padding:0;
        }
        .formedit .layui-form-select dl dd,
        .formedit .layui-form-select dl dt{
            line-height: 26px;
            font-size: 12px;
        }
        .formedit .layui-input,
        .formedit .layui-form-item .layui-input-inline{
            width:auto ;
        }
        .formedit .layui-form-radio{
            line-height:26px;
            margin:0;
        }
        .formedit .layui-form-radio>i{
            font-size:16px;
            margin-right:4px;
        }

        .formedit .layui-form-radio *{
            color:#8A8A8A;

        }
        .formedit .inputblock{
            margin-left:0;
            min-height:26px;
        }
        .formedit .layui-input, .layui-select{
            width:160px;
            height:26px;
            line-height: 26px;
            font-size:12px;
            color:#363636
        }
        .formedit .layui-form-switch{
            margin-top:0;
            width: 38px;
            height: 21px;
            line-height: 21px;
            padding:0;
        }
        .formedit .layui-form-onswitch{
            background: #007AFF;
            border-color:#007AFF;
        }
        .formedit .wth104{
            width:104px
        }
        .formedit .mat4{
            margin-top: 4px;
        }
        .formedit .fr{
            float:right
        }
        .formedit .btnsalign{
            text-align: center;
        }
        .formedit .layui-btn{
            width: 79px;
            height: 26px;
            background: #218EEB;
            line-height: 26px;
            border-radius: 13px;
            font-size:12px;
        }
        .formedit .disableinput{
            background:#f2f2f2;
        }
        .formedit .layui-tab{
            margin:0;
        }
        .formedit .layui-tab-brief .layui-tab-title{
            width:100%;
        }
        .formedit .layui-tab-brief>.layui-tab-title .layui-this{
            color:#007fff;
        }
        .formedit .layui-tab-brief>.layui-tab-more li.layui-this:after,
        .formedit .layui-tab-brief>.layui-tab-title .layui-this:after{
            border-bottom:2px solid #007fff;
        }
        .formedit .contentnone{
            font-size: 14px;
            color: #aeaeae;
        }
        .formedit .textareas{
            height: 165px;
            resize:none;
        }
        .formedit .step1heigth{
            height:252px;
            padding-top:18px;
        }
        .formedit .step2wid{
            height:270px;
        }
        .formedit .layui-tab-content{
            padding: 10px 0;
        }
        .concentration{
            width: 155px;
            height: 51px;
            background: #404244;
            border-radius: 0px 0px 33px 0px;
            opacity: 0.8;
            position:fixed;
            top:0;
            left:0;
            font-size: 30px;
            font-family: PingFangTC-Regular, PingFangTC;
            color: #FFFFFF;
            line-height: 34px;
            letter-spacing: 2px;
            line-height: 51px;
        }

        dd{
            color:#333;
        }

        .contentd .layui-input {
            width: 260px;
            height: 25px;
            background: #F1F1F1;
            border-radius: 15px;
            margin-left: 8px;
            padding-left: 28px;
        }

        .personTab{
            display:flex;
            border-bottom:1px solid #E7E7E7;
        }
        .personType{
            width:45%;
            height:36px;
            line-height: 36px;
            text-align: center;
        }

        .layui-forma{
            margin-top:20px;
        }

        .personChoosed{
            color:#007AFF;
            border-bottom:2px solid #007AFF;
        }

        .zbPerson{
            display:flex;
            align-items: center;
            font-size:12px;
            padding-left: 8px;
        }

        .layui-form .layui-inputzb{
            width:80px;
        }
        .referencePoint{
            margin-left:10px;
            color:#007AFF;
            font-size:12px;
        }
        .pointSearch{
            width: 48px;
            height: 25px;
            background: #007AFF;
            border-radius: 15px;
            text-align: center;
            line-height: 25px;
            color:#fff;
            margin-left:8px;
        }
        .layui-search{
            position:absolute;
            font-size: 12px;
            font-weight: 400;
            color: #1681FB;
            top:4px;
            right:10px;
            cursor: pointer;
        }
        .personChoosed{
            color:#007AFF;
            border-bottom:2px solid #007AFF;
        }
        .searchFrame{
            width: 260px;
            height: 25px;
            background: #F1F1F1;
            border-radius: 15px;
            margin-left: 8px;
            padding-left: 35px;
            border: none;
        }
        .rangeSet{
            height: 25px;
            width: 80px;
            background: #F1F1F1;
            border-radius: 15px;
            margin-left: 8px;
            padding-left: 14px;
            border:none;
        }

        .line{
            width:100%;
            height:1px;
            background-color: #E7E7E7;
            margin-top:15px;
        }

        .zbform{
            padding-bottom:20px;
            border-bottom:1px dotted #E7E7E7;
        }

        .layui-form>ul{
            clear: both;
            margin-top:5px;
            margin-left:20px;
        }
        .layui-form>ul li{
            clear: both;
            margin-top:5px;
        }
        .layui-form>ul li{
            clear: both;
            position: relative;
            display: flex;
            align-items: center;
        }
        .layui-form>ul li span{
            display:inline-block;
            width:235px;
            height:30px;
            line-height: 30px;
            margin-left:10px;
            border-bottom:1px solid #ECECEC;
            color:#454545;
        }
        .layui-form>ul li .choose span{
            display:inline-block;
            width:auto;
            height:auto;
            margin-left:0;
            line-height: 20px;
            border-bottom:none;
            font-size: 13px;
            color: #4B4B4B;
        }

        .layui-form>ul .personDetailsz{
            width: 250px;
            display: flex;
            justify-content: space-between;
        }
        .layui-form>ul .personDetailsz span{
            width:auto;
        }
        .distancesz{
            margin-left:10px;
        }
        .demo-tree-more{
            margin-left: 20px;
            height: 390px;
        }

    </style>
    <!-- <link rel="stylesheet" type="text/css" href="../../css/mapstyle.css">
    <link rel="stylesheet" type="text/css" href="../../css/xcConfirm.css"/>
    <script src="../../js/xcConfirm.js" type="text/javascript" charset="utf-8"></script>-->

    <link href="../../layui/css/layui.css" rel="stylesheet" type="text/css">
    <script src="../../layui/layui.js"></script>
    <!--    <script src="../../layui/layui-xtree.js"></script>-->
    <link href="../../css/style.css" rel="stylesheet" type="text/css">
    <script src="../../js/jquery-1.8.3.js"></script>
    <script src="../../js/util.js"></script>



    <!-- <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=nSGoPNzNrehEaGBst1TZzklH"></script> -->
    <!--加载鼠标绘制工具-->
    <!-- <script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
    <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" /> -->
    <!--加载检索信息窗口-->
    <!-- <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>
    <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" /> -->
    <!--测算工具类-->
    <!-- <script type="text/javascript" src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>
    <script src="http://mapv.baidu.com/build/mapv.min.js"></script> -->

    <!-- 自定义添加script -->
    <script type="text/javascript">
      !function addScript () {
        var pathObj = {
          scriptList: [
            "/api?v=2.0&ak=nSGoPNzNrehEaGBst1TZzklH",
            //加载鼠标绘制工具
            "/library/DrawingManager/1.4/src/DrawingManager_min.js",
            // -加载检索信息窗口
            "/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js",
            //测算工具类
            "/library/GeoUtils/1.2/src/GeoUtils_min.js",
            "/library/Heatmap/2.0/src/Heatmap_min.js",
          ],
          scriptListTwo: [
            "/build/mapv.min.js"
          ],
          link: [
            "/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css",
            "/library/DrawingManager/1.4/src/DrawingManager_min.css"
          ]
        }
        var urlArr = window.sessionStorage.getItem('urlStr').split(";");
        var oHead = document.getElementsByTagName('HEAD').item(0);
        pathObj.scriptList.forEach(element => {
          var oScript = document.createElement("script");
          oScript.type = "text/javascript";
          oScript.src = urlArr[0] + element;
          oHead.appendChild(oScript);
        });
        pathObj.scriptListTwo.forEach(element => {
          var oScript = document.createElement("script");
          oScript.type = "text/javascript";
          oScript.src = urlArr[1] + element;
          oHead.appendChild(oScript);
        });
        pathObj.link.forEach(element => {
          var oLink = document.createElement("link");
          oLink.type = "stylesheet";
          oLink.href = urlArr[0] + element;
          oHead.appendChild(oLink);
        });
      }();
    </script>

</head>
<body>
<div id="allmap"></div>
<div id="loadingDiv" class="load-white-bg hide">
    <span class="qloading">正在加载...</span>
</div>
</body>
</html>
<script type="text/javascript">
    $(function () {
        $('.tabars').css('height',document.body.clientHeight+'px') ;
        $('#test12').css({'height':document.body.clientHeight-294+'px','overflow-y':'auto'});
    })
    var map = null;
    var mapvLayer = null;
    var circleOverlays = [];
    var rectangleOverlays = [];
    var pointsOverlays = [];
    var latitudeAndLongitudeValueArr = [];
    var pointName = [];
    var mgrId = "";
    var urlMgrId = getUrlParam("mgrId");
    var cityId = "";
    var linePointNames = [];
    var  referencePointArr = [];
    var assignPersonPoints = [];
    var assignRangePersonPoints = [];
    var circles = [];
    var reset;
    var colorArray = ["#1F82EE","#7D7D7D","#E98E20","#1DD73A","#1CE5BF","#7D22E3","#E131BF","#EC1F1F"];
    layui.use(['tree','util','table', 'form', 'jquery', 'element','layer','laydate'], function () {
        var form = layui.form;
        var $ = layui.$;
        var util = layui.util;
        var layer = layui.layer;
        var tree = layui.tree;
        var laydate = layui.laydate;
        var element = layui.element;//tab
        let treeData = [];
        var switchnum='',sendnum='',tabindex=0;//数量
        var title='项目基本信息';

        var flagMgr;//项目标识  1为正常应急项目  2为盱眙供电局项目
		laydate.render({
	             elem: '#startTime'
	             , type: 'datetime'
	             ,min:minDate()
                ,value : getRecentDay(0)
	        });
	        laydate.render({
	             elem: '#endTime'
	             , type: 'datetime'
	             ,min:minDate()
                ,value : getRecentDay(1/96)
	        });
	        
	        function minDate(){
			    var now = new Date();
			    return now.getFullYear()+"-" + (now.getMonth()+1) + "-" + now.getDate()+" "+now.getHours()+":"+now.getMinutes()+":"+now.getSeconds();
			}

        function getRecentDay(day) {
            var today = new Date();
            var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
            today.setTime(targetday_milliseconds);
            var tYear = today.getFullYear();
            var tMonth = today.getMonth();
            var tDate = today.getDate();
            var tHours = today.getHours();
            var tMinutes = today.getMinutes();
            var tSeconds = today.getSeconds();
            tMonth = doHandleMonth(tMonth + 1);
            tDate = doHandleMonth(tDate);
            tHours = doHandleMonth(tHours);
            tMinutes = doHandleMonth(tMinutes);
            tSeconds = doHandleMonth(tSeconds);

            return tYear + "-" + tMonth + "-" + tDate + ' ' + tHours + ':' + tMinutes + ':' + tSeconds;
        }

        function doHandleMonth(month) {
            var m = month;
            if (month.toString().length == 1) {
                m = "0" + month;
            }
            return m;
        }

        //发送短信
        form.on('switch(sendNum)', function (data) {
            sendnum = data.elem.checked;
            //判断是否需要填写数据
            if(sendnum){
                $('#threshold').attr("disabled",false).removeClass("disableinput");
            }else{
                $('#threshold').attr("disabled",true).addClass("disableinput");
                $('#threshold').attr("value","");
            }
        });

        //tab切换
        element.on('tab(docDemoTabBrief)', function(data){
            tabindex = data.index;
            console.info(tabindex);
        });
        //上一步
        $("#prev").click(function(){
            if($('#step2').is(':visible')){
                $("#submit").text('下一步');
                $("#step1").css('display','block');
                $("#step2").css('display','none');

            }else{
                layer.closeAll();
            }
        });
        //发送模板
        form.on('switch(switchNum)', function (data) {
            switchnum = data.elem.checked;
            //判断是否需要填写数据
            if(switchnum){
                $('#cycleThreshold').attr("disabled",false).removeClass("disableinput");
            }else{
                $('#cycleThreshold').attr("disabled",true).addClass("disableinput");
                $('#cycleThreshold').attr("value","");
            }
        });

        //开始时间
        let start_a = laydate.render({
            elem: '#startTime',
            trigger: 'click',
            theme: '#007AFF',
            type:'datetime',
            done: function (value, date, endDate) {
                end.config.min = {
                    year: date.year,
                    month: date.month - 1,
                    date: date.date
                }; //开始日选好后，重置结束日的最小日期
                end.config.value = {
                    year: date.year,
                    month: date.month - 1,
                    date: date.date,
                }; //将结束日的初始值设定为开始日
            }
        });

        //结束时间
        let end = laydate.render({
            elem: '#endTime',
            trigger: 'click',
            theme: '#007AFF',
            type:'datetime',
            done: function (value, date, endDate) {
                start_a.config.max = {
                    year: date.year,
                    month: date.month - 1,
                    date: date.date,
                }; //结束日选好后，重置开始日的最大日期
            }
        });

        //提交
        form.on('submit(submitOk)', function(data){



            // console.log(JSON.stringify(data.field));//取的值可以供参考
            if($('#step2').is(':visible')){ //如果是点击确定的时候
                data.field.open = data.field.open ? "true": "false";
                data.field.close = data.field.close ? "true": "false";

                var isThreshold = 0;
                $("input:checkbox[name='isThreshold']:checked").each(function () {
                    isThreshold += parseInt($(this).val());
                });
                var cycleThreshold=0;
                var cycle;
                if(isThreshold==2||isThreshold==3){
                    //var cycle = $("input[name='cycle']:checked").val();     //发送周期
                    cycle = $("#cycle").val();
                    cycleThreshold=$("#cycleThreshold").val();

                };
                console.log(JSON.stringify(data.field));
                console.log(tabindex);
                submitMgrInfo();
            }
            var startTime=$("#startTime").val();
            var endTime=$("#endTime").val();
            if (startTime>=endTime) {
                layer.msg("发送结束时间不能小于等于开始时间");
                return false;
            }
            //判断按钮的字
            $("#submit").text('确定');
            $("#step1").css('display','none');
            $("#step2").css('display','block');
            //修改弹出框title
            $(".layui-layer-title")[0].innerText= "项目信息配置";

            console.log(tabindex);
            return false;
        });


        //判断输入
        form.verify({
            //项目名称
            name: function (value) {
                if (value == '') {
                    return '请输入项目名称';
                }
                if (value.indexOf("-")>0) {
                    return "项目名称中请勿包含  '-' !";
                }
            },
            //地市
            cityId: function (value) {
                if (value == '') {
                    return '请选择地市';
                }
            },
            //县区
            countyId: function (value) {
                if (value == '') {
                    return '请选择市区';
                }
            },
            //开始时间
            startTime:function (value) {
                if(value == '') {
                    return '请选择开始时间';
                }
            },
            //结束时间
            endTime:function (value) {
                if(value == '') {
                    return '请选择结束时间';
                }

            },
            threshold: function (value) {
                if((sendnum && value=='')||(sendnum && value<=0)){
                    return '请输入正确的发送总量';
                }
            },
            cycleThreshold: function (value) {
                console.info(switchnum);
                if((switchnum && value=='')||(switchnum && value<=0)){
                    return '请输入正确的周期发送数量';
                }
            },
            content:function (value) {
                if($('#step2').is(':visible') && value == '' && tabindex==0) {
                    return '请输入发送内容';
                }
            },
        });


        for(var i=0;i<4;i++){
            $(".content").eq(i).hide();
        }
        $(".content").eq(0).show();
        $(".tabar").click(function(){
            for(var i=0;i<4;i++){
                $(".content").eq(i).hide();
                $(".tabar").eq(i).css("backgroundColor","#F9F9F9")
            }
            $(".content").eq($(".tabar").index(this)).show();
            $(this).css("backgroundColor","#fff")
        })
        //swtich的值
        form.on('switch(switchTest)', function (data) {
            console.log(data.elem); //得到checkbox原始DOM对象
            console.log(data.elem.checked); //开关是否开启，true或者false
            console.log(data.value); //开关value值，也可以通过data.elem.value得到
            console.log(data.othis); //得到美化后的DOM对象
            var x = data.elem.checked;
            console.log(x);
        })
        $(".cc").click(function(){
            location.href = "xuyiIndex.html";
        });
        //搜索框的值
        $('#query').on('click', function () {
            var name = $("#inputs-name").val();
            console.log("name"+name);
            treeData = test(name);
            console.log(JSON.stringify(treeData));
            //重载实例
            tree.reload('demoId1', {
                elem: '#test12' //默认是点击节点可进行收缩
                ,data: treeData
                ,edit:false
                ,showCheckbox: true  //是否显示复选框
                ,oncheck: function(obj){
                    console.log(obj.data); //得到当前点击的节点数据
                    console.log(obj.checked); //得到当前节点的展开状态：open、close、normal
                    console.log(obj.data.checked); //得到当前节点元素
                }
            });
        });

        //判断项目名称是否重复
        function judgeMgrName(mgrName){
            var url = '/util/getMgrName';
            $.ajax({
                    url: url,
                    type: 'post',
                    async: false,
                    data: "mgrName="+mgrName,
                    success: function (json) {
                        flagMgr = json.data;
                    }, error: function () {
                        layer.msg('系统异常，请联系管理员处理!');
                    }
                }
            );
        }

        // 苏州   11淮安   12宿迁   13南京   14连云港   15徐州   16常州   17镇江   18无锡   19南通   20泰州   21 盐城   22 扬州   23
        function getJWByCityId(cityId){
            if(cityId=="11"){
                return new BMap.Point(120.58,31.30);
            }else if(cityId=="12"){
                return new BMap.Point(119.02,33.62);
            }else if(cityId=="13"){
                return new BMap.Point(118.28,33.97);
            }else if(cityId=="14"){
                return new BMap.Point(118.78,32.04);
            }else if(cityId=="15"){
                return new BMap.Point(119.22,34.60);
            }else if(cityId=="16"){
                return new BMap.Point(117.18,34.27);
            }else if(cityId=="17"){
                return new BMap.Point(119.95,31.78);
            }else if(cityId=="18"){
                return new BMap.Point(119.45,32.20);
            }else if(cityId=="19"){
                return new BMap.Point(120.30,31.57);
            }else if(cityId=="20"){
                return new BMap.Point(120.88,31.98);
            }else if(cityId=="21"){
                return new BMap.Point(119.92,32.45);
            }else if(cityId=="22"){
                return new BMap.Point(120.15,33.35);
            }else if(cityId=="23"){
                return new BMap.Point(119.40,32.40);
            }else{
                return new BMap.Point(118.875, 32.825);
            }
        }


        var initialFunc = function(){
            // 创建Map实例,设置地图允许的最小/大级别
            map = new BMap.Map("allmap",{enableMapClick:false});
            //开启滚轮缩放
            map.enableScrollWheelZoom(true);
            if(cityId ==null||cityId ==''){
                console.info("2222");
                map.centerAndZoom("南京市");

            }else{
                console.info("1111");
                map.centerAndZoom(getJWByCityId(cityId),11);
            }

            map.setMaxZoom(18);
            map.setMinZoom(11);
            //右下角添加控件
            map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT , type: BMAP_NAVIGATION_CONTROL_SMALL}));
            function ZoomControl(){
                // 默认停靠位置和偏移量
                this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
                this.defaultOffset = new BMap.Size(0, 80); // 距离左上角位置
            }
            ZoomControl.prototype = new BMap.Control();

            // 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
            // 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
            ZoomControl.prototype.initialize = function(map){
                // 创建一个DOM元素
                var div = document.createElement("div");
                // 添加文字说明
                div.appendChild(document.createTextNode("保存"));
                // 设置样式
                div.style.cursor = "pointer";
                div.style.border = "1px solid gray";
                div.style.backgroundColor = "white";
                div.style.width = "55px";
                div.style.height = "45px";
                div.style.textAlign='center';
                div.style.backgroundColor='#2e84b5';
                div.style.color='#ededed';
                div.style.lineHeight='45px';
                div.style.textAlign='center';
                div.style.borderRadius='10px';
                // 绑定事件
                div.onclick = function(e){
                    if((circleOverlays.length+rectangleOverlays.length)===0 && pointName.length===0){
                        layer.open({
                            title:"提示"
                            ,type: 1
                            ,offset: 'auto'
                            ,id: 'layerDemo' //防止重复弹出
                            ,content: '<div style="padding: 20px 80px;"><span>请先选取发送区域再进行保存</span></div>'
                            ,btn: '关闭'
                            ,btnAlign: 'c' //按钮居中
                            ,shade: 0 //不显示遮罩
                            ,yes: function(){
                                layer.closeAll();
                            }
                        });
                    }else{
                        var txt=  "目前圈画"+(circleOverlays.length+rectangleOverlays.length)+"个区域，将保存发送范围，请确认！";
                        layer.open({
                            type: 1
                            ,offset: 'auto'
                            ,id: 'layerDemo' //防止重复弹出
                            ,content: '<div style="padding: 20px 80px;"><span>'+txt+'</span></div>'
                            ,btn: ['确定','取消']
                            ,yes: function(index){
                                latitudeAndLongitudeValueArr.length=0;
                                for (let i =0;i<circleOverlays.length;i++){
                                    latitudeAndLongitudeValueArr.push(circleOverlays[i].getCenter().lng+","+circleOverlays[i].getCenter().lat+"+"+circleOverlays[i].getRadius());
                                }
                                for (let i =0;i<rectangleOverlays.length;i++){
                                    latitudeAndLongitudeValueArr.push(getPoints(rectangleOverlays[i]));
                                }
                                parent.$("#stationData").val(JSON.stringify(latitudeAndLongitudeValueArr));
                                layer.close(index);
                                var json;
                                var url;
                                var sessionMgrId = sessionStorage.getItem("sessionMgrId");
                                if(sessionMgrId==''||sessionMgrId==null){
                                    mgrId = urlMgrId;
                                }else{
                                    mgrId = sessionMgrId;
                                }
                                let jsonParams ={
                                    'mgrId': mgrId
                                    ,'longAndLatListInfo' : JSON.stringify(latitudeAndLongitudeValueArr)
                                };


                                var url = '/sendRange/getStations';
                                $.ajax({
                                    contentType:"application/json;charset=UTF-8",
                                    type: 'post',
                                    url: url,
                                    data:JSON.stringify(jsonParams),
                                    dataType:'json',
                                    async: false,
                                    success: function (resp) {
                                        console.info(JSON.stringify(resp));
                                        if (resp.retCode=="0"){
                                            json = resp.data;
                                            mgrId = json.mgrId;
                                            sessionStorage.setItem("sessionMgrId",mgrId);
                                            var stationIds  = json.stationIds;
                                            var msg = '所选中区域共有'+json.stationCount+'个基站';
                                            layer.closeAll();
                                            layer.open({
                                                title:"提示"
                                                ,type: 1
                                                ,offset: 'auto'
                                                ,id: 'layerDemo2' //防止重复弹出
                                                ,content: `<div style="padding: 20px 80px;"><span>${msg}</span></div>`
                                                ,btn: ['确定','取消']
                                                ,btnAlign: 'c' //按钮居中
                                                ,shade: 0 //不显示遮罩
                                                ,yes: function(){
                                                    var rangeUrl ;
                                                    sessionMgrId = sessionStorage.getItem("sessionMgrId");
                                                    if(sessionMgrId==''||sessionMgrId==null){
                                                        rangeUrl = '/sendRange/createRange';
                                                    }else{
                                                        rangeUrl = '/sendRange/updateRange';
                                                    }
                                                    let jsonParams = {
                                                        'mgrId': mgrId,
                                                        'range': JSON.stringify(latitudeAndLongitudeValueArr),
                                                        'stationIds':stationIds
                                                    };
                                                    $.ajax({
                                                        contentType: "application/json;charset=UTF-8",
                                                        type: 'post',
                                                        url: rangeUrl,
                                                        data: JSON.stringify(jsonParams),
                                                        dataType: 'json',
                                                        async: false,
                                                        success: function (resp) {
                                                            if (resp.retCode==="0"){
                                                                layer.open({
                                                                    title: "提示"
                                                                    , type: 1
                                                                    , offset: 'auto'
                                                                    , id: 'layerDemo3' //防止重复弹出
                                                                    , content: `<div style="padding: 20px 80px;"><span>${msg}已成功保存</span></div>`
                                                                    , btn: '确定'
                                                                    , btnAlign: 'c' //按钮居中
                                                                    , shade: 0 //不显示遮罩
                                                                    , yes: function () {
                                                                        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引

                                                                        parent.layer.close(index); //再执行关闭
                                                                    }
                                                                });
                                                            }else {
                                                                layer.msg(resp.retMsg);
                                                            }
                                                        }
                                                    });
                                                }
                                                ,btn2:function(){
                                                    layer.closeAll();
                                                }
                                            });
                                        } else {
                                            layer.msg("获取基站异常："+resp.retMsg);
                                        }
                                    },
                                    error: function (resp) {
                                        console.info(JSON.stringify(resp));
                                        layer.msg("获取基站异常"+resp.msg);
                                    }
                                });
                            }
                            ,btn2: function(){
                                layer.closeAll();
                            }
                        });
                    }
                }
                // 添加DOM元素到地图中
                map.getContainer().appendChild(div);
                // 将DOM元素返回
                return div;
            }
            // 创建控件
            var myZoomCtrl = new ZoomControl();
            // 添加到地图当中
            map.addControl(myZoomCtrl);

            /*创建清除按钮*/
            function clearControl(){
                // 默认停靠位置和偏移量
                this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
                this.defaultOffset = new BMap.Size(60, 80); // 距离左上角位置
            }
            clearControl.prototype = new BMap.Control();
            clearControl.prototype.initialize = function(map){
                var div = document.createElement("div");
                div.appendChild(document.createTextNode("清除"));
                div.style.cursor = "pointer";
                div.style.border = "1px solid gray";
                div.style.backgroundColor = "white";
                div.style.width = "55px";
                div.style.height = "45px";
                div.style.textAlign='center';
                div.style.backgroundColor='#2e84b5';
                div.style.color='#ededed';
                div.style.lineHeight='45px';
                div.style.textAlign='center';
                div.style.borderRadius='10px';
                div.onclick = function(e){
                    clearAll();
                }
                map.getContainer().appendChild(div);
                return div;
            }
            var myClearCtrl = new clearControl();
            map.addControl(myClearCtrl);

            var overlaycomplete = function(e){
                e.overlay.enableEditing();
                //圆
                if (e.drawingMode === BMAP_DRAWING_CIRCLE) {
                    circleOverlays.push(e.overlay);
                    console.info(e.overlay.getCenter().lng+","+e.overlay.getCenter().lat+"+"+e.overlay.getRadius());
                }
                //矩形
                if(e.drawingMode === BMAP_DRAWING_RECTANGLE){
                    rectangleOverlays.push(e.overlay);

                }
                //多边形
                if ( e.drawingMode === BMAP_DRAWING_POLYGON ) {
                    rectangleOverlays.push(e.overlay);
                }
            };
            var styleOptions = {
                strokeColor:"blue",    //边线颜色。
                fillColor:"blue",      //填充颜色。当参数为空时，圆形将没有填充效果。
                strokeWeight: 3,       //边线的宽度，以像素为单位。
                strokeOpacity: 0.8,	   //边线透明度，取值范围0 - 1。
                fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。
                strokeStyle: 'solid' //边线的样式，solid或dashed。
            }
            //实例化鼠标绘制工具
            var drawingManager = new BMapLib.DrawingManager(map, {
                isOpen: false, //是否开启绘制模式
                enableDrawingTool: true, //是否显示工具栏
                drawingToolOptions: {
                    anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
                    offset: new BMap.Size(120, 80), //偏离值
                    drawingModes : [
                        BMAP_DRAWING_CIRCLE,
                        BMAP_DRAWING_POLYGON,
                        BMAP_DRAWING_RECTANGLE
                    ]
                },
                circleOptions: styleOptions, //圆的样式
                polygonOptions: styleOptions, //多边形的样式
                rectangleOptions: styleOptions //矩形的样式
            });
            //添加鼠标绘制工具监听事件，用于获取绘制结果
            drawingManager.addEventListener('overlaycomplete', overlaycomplete);
            //drawingManager.setTop('true');
            function clearAll() {
                for(var i = 0; i < circleOverlays.length; i++){
                    map.removeOverlay(circleOverlays[i]);
                }
                circleOverlays.length = 0 ;
                for(var i = 0; i < rectangleOverlays.length; i++){
                    map.removeOverlay(rectangleOverlays[i]);
                }
                latitudeAndLongitudeValueArr.length = 0;
                rectangleOverlays.length = 0 ;
            }
        };

        $(document).ready(function() {
            mgrId = sessionStorage.getItem('sessionMgrId');
            cityId = sessionStorage.getItem('sessionCityId');
            initialFunc();
            console.info("----"+mgrId);
            if(mgrId!=''&&mgrId!=null){
                init();
            }else{
                console.log("first insert");
            }
        });

        function init() {
            let jsonParams ={"mgrId": mgrId} ;
            var url = '/sendRange/queryRange';
            $.ajax({
                contentType:"application/json;charset=UTF-8",
                type: 'post',
                url: url,
                data:JSON.stringify(jsonParams),
                dataType:'json',
                async: false,
                success: function (data) {
                    if (data.retCode==="0"){
                        console.info("===="+JSON.stringify(data));
                        var color = colorArray[1];
                        var range = data.data.rangeValue;
                        for (let m=0;m<range.length;m++){
                            var extent = range[m].split('+');
                            if (extent.length===2){
                                var circle = new BMap.Circle(new BMap.Point(extent[0].split(',')[0], extent[0].split(',')[1]),extent[1],{strokeColor:color, strokeWeight:4, fillColor:color,fillOpacity:0.3});
                                map.addOverlay(circle);
                                circle.enableEditing();
                                circleOverlays.push(circle);
                            } else {
                                var extentPoint = [];
                                for (let n=0;n<extent.length;n++){
                                    extentPoint.push(new BMap.Point(extent[n].split(',')[0],extent[n].split(',')[1]));
                                }
                                var rectangle = new BMap.Polygon(extentPoint,
                                    {strokeColor:color, strokeWeight:4, fillColor:color,fillOpacity:0.3});
                                console.info(extentPoint);
                                map.addOverlay(rectangle);
                                rectangle.enableEditing();
                                rectangleOverlays.push(rectangle);
                            }
                        }


                    } else {
                        layer.msg("获取项目发送范围异常："+data.retMsg);
                    }
                },
                error: function (data) {
                    layer.msg("获取项目发送范围异常："+data.retMsg);
                }
            });

        }


        //获取多边形经纬度合集
        function getPoints(polygon){
            var latitudeAndLongitudeValue = "";
            var path = polygon.getPath();
            for (i = 0;i<path.length;i++){
                if (i === path.length-1){
                    latitudeAndLongitudeValue+=path[i].lng+","+path[i].lat;
                    return latitudeAndLongitudeValue;
                }
                latitudeAndLongitudeValue+=path[i].lng+","+path[i].lat+"+";
            }
            return latitudeAndLongitudeValue;
        }

        $('#determine').on('click', function () {
            clearLinePointNames();
            var oCks = [];
            oCks = tree.getChecked("demoId1");
            for (let i = 0; i < oCks.length; i++) {
                var color = colorArray[i%8];
                var children = oCks[i].children;
                var oCksNames = [];
                linePointNames.push(oCksNames);

                for (let k = 0;k<children.length;k++){
                    var linePointName  = oCks[i].title+"-"+children[k].title;
                    oCksNames.push(linePointName);
                    pointName.push(linePointName);
                    //console.info(linePointName);
                    // 添加事件
                    // function addMarker(e,ee,polygon){
                    //     polygon.setFillOpacity(0.3);
                    //     polygon.setFillColor(polygon.getStrokeColor());
                    //     if (pointName.indexOf(linePointNames[i][k]) === -1){
                    //         pointName.push(linePointNames[i][k]);
                    //     }
                    // }
                    // //删除事件
                    // function removeMarker(e,ee,polygon){
                    //     polygon.setFillColor("transparent");
                    //     if (pointName.indexOf(linePointNames[i][k]) === -1){
                    //     } else {
                    //         pointName.splice(pointName.indexOf(linePointNames[i][k]),1);
                    //     }
                    // }
                    var points = [];
                    var pointItude = [];
                    pointItude = children[k].field.split('+');
                    for (let j=0;j<pointItude.length;j++){
                        var itude=[];
                        itude=pointItude[j].split(',');
                        points.push( new BMap.Point(itude[0],itude[1]))
                    }
                    var polygon = new BMap.Polygon(points,
                        {
                            strokeColor : color,
                            fillColor : color,
                            fillOpacity : 0.3,
                            strokeWeight : 4,
                            strokeOpacity : 1
                        }); //创建多边形
                    //创建右键菜单
                    // var menu=new BMap.ContextMenu();
                    //
                    // menu.addItem(new BMap.MenuItem("选中当前点位",addMarker.bind(polygon)));
                    // menu.addItem(new BMap.MenuItem("删除当前点位",removeMarker.bind(polygon)));
                    // polygon.addContextMenu(menu);
                    map.addOverlay(polygon);
                    pointsOverlays.push(polygon);
                    //创建点位标注
                    var opts = {
                        position : points[0],    // 指定文本标注所在的地理位置
                        offset   : new BMap.Size(0, 0)    //设置文本偏移量
                    };
                    var label = new BMap.Label(linePointName, opts);  // 创建文本标注对象
                    label.setStyle({
                        backgroundColor : color,
                        color : "white",
                        fontSize : "12px",
                        height : "20px",
                        lineHeight : "20px",
                        fontFamily:"微软雅黑",
                        borderRadius:"8px",
                        paddingLeft:"5px",
                        paddingRight:"5px",
                        border:"0"
                    });
                    map.addOverlay(label);
                    pointsOverlays.push(label)
                }
            }
            console.log(linePointNames);
        });
        $('#clearPoints').on('click', function () {
            $("#inputs-name").val("");
            treeData = test("");
            //重载实例
            tree.reload('demoId1', {
                elem: '#test12' //默认是点击节点可进行收缩
                ,data: treeData
                ,edit:false
                ,showCheckbox: true  //是否显示复选框
                ,oncheck: function(obj){
                }
            });
            clearLinePointNames();
        });
        function clearLinePointNames() {
            for(let i = 0; i < pointsOverlays.length; i++){
                map.removeOverlay(pointsOverlays[i]);
            }
            pointName.length = 0;
            pointsOverlays.length = 0 ;
        }


        //$(".personContent").eq(1).hide();
        $(".personType").eq(0).addClass('personChoosed');
        $(".personType").on('click',function(){
            if($(this).index()==0){
                //clearRangePersonOverlay();
            }else{
                //clearPersonOverlay();
            }
            $(".personType").removeClass('personChoosed');
            $(".personContent").hide();
            $(this).addClass('personChoosed');
            $(".personContent").eq($(this).index()).css('display','block');
        });


        $('#clearPerson').on('click', function () {
            designatedPersonnel('');
            clearPersonOverlay();
        });
        $('#clearRangePerson').on('click', function () {
            $("#ulzbPersonLists").html("");
            clearRangePersonOverlay();
        });

        function clearPersonOverlay(){
            assignPersonPoints.forEach((items,index)=>{
                map.removeOverlay(items);
            });
            assignPersonPoints.length = 0;
        }

        function clearRangePersonOverlay(){
            circles.forEach((items,index)=>{
                map.removeOverlay(items)
            });
            circles.length = 0;
            referencePointArr.forEach((items,index)=>{
                map.removeOverlay(items)
            });
            referencePointArr.length = 0;

            assignRangePersonPoints.forEach((items,index)=>{
                map.removeOverlay(items);
            });
            assignRangePersonPoints.length = 0;
        }

        $('.referencePoint').on('click', function () {
            map.addEventListener("click",function(e){
                if (referencePointArr.length ===0){
                    var marker = new BMap.Marker(e.point);  // 创建标注
                    map.addOverlay(marker);               // 将标注添加到地图中
                    marker.setAnimation(BMAP_ANIMATION_BOUNCE);//跳动的动画
                    //marker.enableDragging();//可拖拽
                    console.info(marker.getPosition().lng + "," + marker.getPosition().lat);
                    referencePointArr.push(marker);
                }
            });
        });

    });
</script>
